<template>
	<view class="container">
		<view class="top">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item, index) in list" :key="item.id">
				<view class="cartInfo" id="demo1">
					<!-- 购物车商品信息 -->
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							<switch type="checkbox" :checked="item.checked" @click="singleCheck(index)" />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common"><image :src="$baseUrl + item.img" mode=""></image></view>

						<!-- 信息 -->
						<view class="cartInfo_info">
							<label for="" style="font-size: 26rpx;">{{ item.goodsname }}</label>
							<label for="" style="color: red;">￥{{ item.price }}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label for="" @click="sub(index)">-</label>
								<label for="">{{ item.num }}</label>
								<label for="" @click="add(index)">+</label>
							</view>
						</view>
					</view>
				</view>
				<view class="cartDel" id="demo2"><label for="" @click="delOne(index)">删除</label></view>
			</scroll-view>
		</view>

		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch type="checkbox" :checked="isAll" @click="doAll"/>
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">
					总计：
					<label style="color: red;">￥{{ total }}</label>
				</view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3">
				<!-- 被选中的商品的个数 -->
				<label @click="toConfirm">去结算</label>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [] //购物车列表
		};
	},
	onShow() {
		//获取购物车列表
		this.getList();
	},
	computed: {
		totalCount(){
			// return this.list.reduce((accumulator,item)=>{
			// 	if(item.checked){
			// 		 return accumulator+1
			// 	}
			// },1)
		},
		// total:function(){
		// 	var result=0
		// 	this.list.forEach(item=>{
		// 		if(item.checked){
		// 			result +=item.price*item.num
		// 		}
		// 	})
		// 	return result;
		// },
		//计算总价
		total: {
			get: function() {
				// console.log("here")
				var result = 0;
				this.list.forEach(item => {
					if (item.checked) {
						result += item.price * item.num;
					}
				});
				return result;
			},
			set: function(val) {}
		},
		//是否全选
		isAll:{
			get:function(){
				if(this.list.length==0){
					return false;
				}
				var result =this.list.every(item=>{
					return item.checked==true
				})
				return result;
				
			},
			set:function(val){
				
			}
		}
	},
	methods: {
		//跳转结算页面
		toConfirm(){
			//保存到缓存
			var arr=this.list.filter(item=>{
				return item.checked==true
			})
			uni.setStorageSync("confirm",arr)
			
			//页面跳转
			uni.navigateTo({
				url:"/pages/confirm/confirm"
			})
			
		},
		//删除某一个商品
		async delOne(index){
			//删除数据库
			var id=this.list[index].id;		//购物车id
			let {token}=uni.getStorageSync("userInfo");
			var result =await this.$http("/api/cartdelete",{id},"GET",token).catch(err=>{
				console.error(err)
			})
			//删除页面中的数据
			// console.log(result)
			this.list.splice(index,1)
		},
		//点击全选
		doAll(){
			var result =!this.isAll
			this.list.forEach(item=>{
				item.checked=result;
			})
		},
		//点击增加
		add(index){
			this.list[index].num++
			this.cartEdit(index)
		},
		sub(index){
			if(this.list[index].num<=1){
				return;
			}
			this.list[index].num--;
			
			this.cartEdit(index)
			
		},
		//修改数据库
		async cartEdit(index){
			//更改数据库
			let {id,num}=this.list[index];
			let {token}=uni.getStorageSync("userInfo");
			var result =await this.$http("/api/cartedit",{id,num},"GET",token).catch(err=>{
				console.error(err)
			})
			console.log(result);
		},
		//单选
		singleCheck(index) {
			// console.log(index)
			this.list[index].checked = !this.list[index].checked;
		},
		//获取购物车列表
		async getList() {
			//从本地获取到uid和token
			let { uid, token } = uni.getStorageSync('userInfo');
			//请求购物车列表
			var result = await this.$http('/api/cartlist', { uid }, 'GET', token).catch(err => {
				console.error(err);
			});
			//如果没有token，获取token过期，页面跳转到登录页
			if (result.data.code != 200) {
				uni.reLaunch({
					url: '/pages/send/send'
				});
			}
			//把数据渲染到页面
			// console.log(result);
			if(result.data.list==null)return;
			var list = result.data.list;
			list.forEach(item => {
				item.checked = false;
			});
			this.list = list;
		}
	}
};
</script>

<style>
@import url('../../common/css/cart.css');
.cartInfo_image_img {
	width: 120rpx;
	height: 120rpx;
}
</style>
